<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>webpack的基本使用</title>
		<!-- 基于列表隔行变色项目 -->
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				box-sizing:border-box;
			}
			html,body{
				height:100%;
				width:100%;
			}
			body{
				font-size:1rem;
				font-family:楷体;
			}
			#app{
				width:40rem;
				min-height:20rem;
				border:0.1rem solid black;
				margin:2rem auto;
				padding:2rem;
				box-shadow:0.5rem 1rem 1rem 0.5rem gray;
			}
			ul:nth-child(1){
				margin-top:0;
			}
			ul,ol{
				list-style-position:inside;
				margin:1rem 0;
			}
			ul li,ol li{
				margin:0.5rem 0;
			}
			h2{
				height:3rem;
				line-height:3rem;
				text-align:center;
				background-color:black;
				color:white;
			}
			pre{
				margin:0.5rem 0;
				border-left:0.05rem solid black;
				font-weight:bold;
				font-size:0.8rem;
			}
		</style>
		<style>
			@media (min-width:1000px) {
				html{
					font-size:20px;
				}
			}
			@media (min-width:500px) and (max-width:1000px) {
				html{
					font-size:16px;
				}
			}
			@media (max-width:500px){
				html{
					font-size:12px;
				}
				body{
					font-size:1.5rem;
				}
				#app{
					width:auto;
					height:auto;
					margin:0;
					border:0;
				}
			}
		</style>
	<!-- 	<script src="./index.js"></script> -->
		<script src="../dist/main.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>列表隔行变色项目实例</h2>
			<ul>
				<li>这是第1个li</li>
				<li>这是第2个li</li>
				<li>这是第3个li</li>
				<li>这是第4个li</li>
				<li>这是第5个li</li>
				<li>这是第6个li</li>
			</ul>
			<h2>创建列表隔行变色项目:</h2>
			<ol>
				<li>新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件package.json</li>
				<li>新建 src 源代码目录</li>
				<li>新建 src -> index.html 首页</li>
				<li>初始化首页基本的结构</li>
				<li>运行 npm install jquery -S 命令，安装 jQuery</li>
				<li>通过模块化的形式，实现列表隔行变色效果</li>
			</ol>
			<h2>在项目中安装和配置webpack</h2>
			<ol>
				<li>运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包</li>
				<li>在项目跟目录中，创建名为 webpack.config.js 的 webpack 配置文件</li>
				<li>在 webpack 的配置文件中，初始化如下基本配置
				<pre>
  module.exports = {
	  mode:'development'//mode 用来指定构建模式
  }					
				</pre></li>
				<li>在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下:
				<pre>
  "scripts":{
	 "dev":"webpack"//script节点下的脚本，可以通过 npm run 执行
  }					
				</pre></li>
				<li>在终端中运行 npm run dev 命令，启动 webpack 进行项目打包</li>
			</ol>
		</div>
		
		<script>
			/* 
			 【1】创建列表隔行变色项目:
			 1,新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
			 2,新建 src 源代码目录
			 3,新建 src -> index.html 首页
			 4,初始化首页基本的结构
			 5,运行 npm install jquery -S 命令，安装 jQuery
			 6,通过模块化的形式，实现列表隔行变色效果
====================================================
解决上面6中js兼容性问题:

			 【2】在项目中安装和配置webpack
			 1,运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包
			 2,在项目跟目录中，创建名为 webpack.config.js 的 webpack 配置文件
			 3,在 webpack 的配置文件中，初始化如下基本配置
			 module.exports = {
				 mode:'development'//mode 用来指定构建模式
			 }
			 4,在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下:
			 "scripts":{
				 "dev":"webpack"//script节点下的脚本，可以通过 npm run 执行
			 }
			 5,在终端中运行 npm run dev 命令，启动 webpack 进行项目打包
			 */
		</script>
	</body>
</html>
